<template>
  <el-dialog
    top="30px"
    width="800px"
    append-to-body
    v-bind="$attrs"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:content="scope">
        <div class="text-truncate">{{ scope.row.content }}</div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <log-edit :visible.sync="editVisible" :form-data="formData" @success="getData()"></log-edit>

    <el-dialog
      top="30px"
      width="800px"
      append-to-body
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
    >
      <div class="my-2">{{ viewData.create_time }} {{ viewData.real_name }}</div>
      <div class="p-3 card quill-content" v-html="viewData.content"></div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { dateFormat } from '@/common/utils/common'
import LogEdit from '@/credit/views/city/manage/LogEdit'
import { mapGetters } from 'vuex'
export default {
  components: {
    LogEdit,
  },
  props: {
    visible: Boolean,
    userId: String,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 10,
      },
      order: { create_time: 'desc' },
      loading: false,
      tableCount: 0,
      tableColumns: [
        {
          attrs: { label: '时间', prop: 'create_time', align: 'center', width: 170 },
          process: v => dateFormat(v, 'yyyy-MM-dd hh:mm'),
        },
        { attrs: { label: '日志详情', align: 'center' }, slot: 'content' },
        {
          attrs: { label: '操作', align: 'center', width: 150 },
          operations: [
            { content: '详情', icon: 'fa fa-search', event: this.handleView },
            {
              content: '修改',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              ifRender: row => row.user_id === this.user.userId,
            },
            {
              content: '删除',
              icon: 'fa fa-trash',
              attrs: { class: 'text-danger' },
              event: this.handleDelete,
              ifRender: row => row.user_id === this.user.userId,
            },
          ],
        },
      ],
      tableData: [],
      tableName: 'work_log',
      editVisible: false,
      formData: {},
      viewVisible: false,
      viewData: {},
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {
    visible: {
      handler: function () {
        if (this.visible) return this.getData()
      },
      immediate: true,
    },
  },

  created() {},
  methods: {
    handleView(row) {
      this.viewData = { ...row }
      this.viewData.create_time = dateFormat(row.create_time, 'yyyy年MM月dd日')
      this.viewVisible = true
    },
    handleEdit(row) {
      this.formData = { ...row }
      this.editVisible = true
    },
    handleDelete(row) {
      this.$utils
        .msgbox({
          message: `确定删除?`,
          beforeClose: () =>
            this.$api.deleteData(this.$serviceName, this.tableName, row.work_log_id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
    getData() {
      if (!this.userId) {
        return
      }
      this.params['user_id.eq'] = this.userId
      this.loading = true
      this.$api
        .getData('credit', this.tableName, this.params, this.order)
        .then(res => {
          this.tableData = (res && res.data && res.data.data) || []
          this.tableCount = (res && res.data && res.data.totalCount) || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.quill-content {
  white-space: pre-wrap;
}
</style>
